<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>checked.css-超酷CSS3复选框和单选按钮点击动画库|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/checked.min.css">
	<style type="text/css">
		.pd50{padding: 50px 0;}
		.mt50{margin-top: 50px;}
		.t-center{text-align: center;}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>checked.css-超酷CSS3复选框和单选按钮点击动画库 <span>CSS3 Library For Cool Checkbox & Radio Input Animations</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/css3donghua/201609133993.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="container pd50">
			<div class="row">
				<div class="col-sm-offset-3 col-sm-6 mt50">
					<select class="form-control">
						<option>Boing</option>
						<option>Tremolo</option>
						<option>Jump</option>
						<option>Wheel</option>
						<option>Ufo</option>
						<option>Pump</option>
						<option>Scatman</option>
						<option>Up</option>
						<option>Down</option>
						<option>Away</option>
						<option>Boom</option>
						<option>Focus</option>
						<option>Roll</option>
						<option>Omg</option>
						<option>Tv</option>
						<option>Hey</option>
						<option>Inout</option>
						<option>Hooray</option>
						<option>Vertigo</option>
						<option>Return</option>
						<option>Flash</option>
						<option>Yo</option>
						<option>Splash</option>
					</select>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-offset-3 col-sm-6 mt50 t-center">
					<label tabindex="0"><input id="checkbox" class="checked-boing" type="checkbox" name="x" value="1"/><span id="checkbox-label">Boing</span></label>
			          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			          <label><input id="radio" class="checked-boing" type="radio" name="x" value="2"/> <span id="radio-label">Boing</span></label>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-offset-3 col-sm-3 mt50">
					<form>
					  <label><input type="radio" name="x" class="checked-focus"/> Focus</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-tremolo"/> Tremolo</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-boing"/> Boing</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-scatman"/> Scatman</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-ufo"/> Ufo</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-flash"/> Flash</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-return"/> Return</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-boom"/> Boom</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-vertigo"/> Vertigo</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-pump"/> Pump</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-hooray"/> Hooray</label>
					  </br>
					  <label><input type="radio" name="x" class="checked-wheel"/> Wheel</label>
					</form>
				</div>
				<div class="col-sm-offset-1 col-sm-3 mt50">
					  <form>
					  <label><input type="checkbox" name="x" class="checked-focus"/> Focus</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-tremolo"/> Tremolo</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-boing"/> Boing</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-scatman"/> Scatman</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-ufo"/> Ufo</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-flash"/> Flash</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-return"/> Return</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-boom"/> Boom</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-vertigo"/> Vertigo</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-pump"/> Pump</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-hooray"/> Hooray</label>
					  </br>
					  <label><input type="checkbox" name="x" class="checked-wheel"/> Wheel</label>
					</form>
				</div>
			</div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/css3/css3donghua/201605233503.html">
			  <img src="related/1.jpg" width="300" alt="12种checkbox复选框CSS3动画特效"/>
			  <h3>12种checkbox复选框CSS3动画特效</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Form/201607243773.html">
			  <img src="related/2.jpg" width="300" alt="轻量级纯Javascript复选框checkbox动画插件"/>
			  <h3>轻量级纯Javascript复选框checkbox动画插件</h3>
			</a>
		</div>
	</div>
	
	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script type="text/javascript">
		$(document).on('ready', function onReady() {
		    var checkbox = $('#checkbox')
		    , radio = $('#radio')
		    , select = $('select')
		    , radioLabel = $('#radio-label')
		    , checkboxLabel = $('#checkbox-label')
		    , timeout;

		    radio.attr('checked', 'checked');
		    checkbox.attr('checked', 'checked');
		    checkbox.bind('click', function (e) {
		        e.preventDefault();
		    });
		    select.change(function onChange(e,a,b) {
		      var selected = select.find(':selected').text();
		      clearTimeout(timeout);

		      radio.attr('class', '');
		      checkbox.attr('class', '');
		      var timeout = setTimeout(function () {
		        radioLabel.text(selected.toString());
		        checkboxLabel.text(selected.toString());
		        radio.attr('class', 'checked-' + selected.toString().toLowerCase());
		        checkbox.attr('class','checked-' + selected.toString().toLowerCase());
		        
		      }, 650);
		    });
		  });
	</script>
</body>
</html>